<template>
	<view>
		<an-nav-bar title="服务时间"> </an-nav-bar>
		<view class="tab flex">
			<scroll-view scroll-x class="tab-scroll">
				<view class="item" :class="{'item-check':checkDays.key == item.key}" v-for="(item,index) in days" :key="index" @click="onTab(item,index)">
					<view>
						<text v-if="index == 0">今天 {{item.time}}</text>
						<text v-else-if="index == 1">明天{{item.time}}</text>
						<text v-else>{{weekText(item.week)}}{{item.time}}</text>
					</view>
					<view>{{!timeData || !timeData[item.key] || (timeData[item.key] && timeData[item.key].length != 48) ? '可约' : '不可约'}}</view>
				</view>
			</scroll-view>
		</view>
		<view style="height: 116rpx;"></view>
		<view class="content">
			<swiper :autoplay="false" :current="current" :disable-touch="true">
				<swiper-item v-for="(item,index) in days" :key="index">
					<scroll-view scroll-y class="content-scroll">
						<block v-for="(day,idx) in dayList" :key="idx">
							<view class="item-time" :class="{'check':isDisable(item.key,day.text)}" @click="checkData(item,day)">
								{{day.text}}
							</view>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				technicianId:'',
				days: [],
				current: 0,
				checkDays: {},
				timeData: [],
				dayList: [{
					text: '00:00'
				}],
			}
		},
		onLoad(option) {
			if (option.technicianId){
				this.technicianId = option.technicianId
			}
			
			let hour = 0
			let hourText = ''
			let minute = 0
			let minuteText = ""
			for (var i = 0; i < 47; i++) {
				if (minute != 0) {
					hour++
					minute = 0
				} else {
					minute += 30
				}
				hourText = hour < 10 ? '0' + hour : hour
				minuteText = minute == 0 ? '00' : '30'
				this.dayList.push({
					text: hourText + ':' + minuteText
				})
			}
		},
		onShow() {
			this.days=this.getDays(4)
			this.checkDays = this.days[0]
			this.current = 0
			this.getMassageTimeList()
		},	
		methods: {
			getDays(day) {
				var base = new Date().getTime();
				var oneDay = 24 * 3600 * 1000;
			
				var date = [];
				var time = new Date(base);
				var _month = ("0" + (time.getMonth() + 1)).slice(-2)
				var _day = ("0" + time.getDate()).slice(-2)
				date.push({
					key: [time.getFullYear(), _month, _day].join('-'),
					time: _month + '/' + _day,
					week: time.getDay()
				});
				for (var i = 1; i < day; i++) {
					var now = new Date(base += oneDay); //这里控制往前一周还是往后一周
					_month = ("0" + (now.getMonth() + 1)).slice(-2)
					_day = ("0" + now.getDate()).slice(-2)
					date.push({
						key: [now.getFullYear(), _month, _day].join('-'),
						time: _month + '/' + _day,
						week: now.getDay()
					});
				}
				
				return date
			},
			getMassageTimeList(){
				this.$http.get('/appNoAuth/store/massageTechnician/massageTimeList',{
					busyDate:'',
					massageId:this.technicianId,
				}).then(res => {
					if (!res || !res.data || !res.data.length){
						return
					}

					let timeData = {}
					res.data.forEach(item=>{
						if (!timeData[''+item.busyDate]){
							timeData[''+item.busyDate]=[]
						}
						timeData[''+item.busyDate].push(item)
					})
					this.timeData = timeData
					this.checkDays = this.days[0]
				})
			},
			checkData(item, day) {
				if (this.isDisable(item.key, day.text)) {
					return
				}
				// 返回上一页并刷新数据方法
				let pages = getCurrentPages() // 获取页面栈
				let prePage = pages[pages.length - 2] //获取上一页
				prePage.$vm.order.serviceTime = item.key + ' ' + day.text + ':00'
				// 返回上一页 delta返回的页面数 如果delta大于现有页面数，则返回首页
				uni.navigateBack({
					delta: 1
				})
			},
			isDisable(key, text) {
				// 当前时间
				if (this.$common.slotDatetime(key+' '+text+':00') > 0){
					return true
				}
				
				if (!this.timeData[key]){
					return false
				}

				let ness = this.timeData[key].findIndex(val => val.startTime == text)
				if (ness == -1) {
					return false
				} else {
					return true
				}
			},
			weekText(num) {
				switch (num) {
					case 1:
						return '周一'
						break;
					case 2:
						return '周二'
						break
					case 3:
						return '周三'
						break
					case 4:
						return '周四'
						break
					case 5:
						return '周五'
						break
					case 6:
						return '周六'
						break
					case 0:
						return '周天'
						break
					default:
						return ''
				}
			},
			onTab(item, idx) {
				this.current = idx
				this.checkDays = item
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: calc(100vh - 204rpx);
		box-sizing: border-box;
		padding: 20rpx 32rpx;
		background-color: #ffffff;

		/deep/ ::-webkit-scrollbar {
			//滚动条整体样式
			display: block;
			width: 0px !important;
			height: 0px !important;
			-webkit-appearance: auto !important;
			background: red;
			overflow: auto !important;
		}

		/deep/ ::-webkit-scrollbar-thumb {
			//滚动条里面小方块
			border-radius: 10px !important;
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
			background-color: #535353 !important;
		}

		/deep/ ::-webkit-scrollbar-track {
			//滚动条
			border-radius: 10px !important;
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
			background-color: #ededed !important;
		}

		.content-scroll {
			white-space: pre-wrap;

			.item-time {
				display: inline-block;
				width: 154rpx;
				height: 80rpx;
				box-sizing: border-box;
				border: 1px solid #ccc;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 6rpx;
				text-align: center;
				line-height: 80rpx;

				&:nth-child(4n + 4) {
					margin-right: 0rpx;
				}
			}

			.check {
				opacity: .4;
			}
		}

		swiper,
		swiper-item,
		.content-scroll {
			width: 100%;
			height: 100%;

		}
	}

	.tab {
		width: 100%;
		height: 116rpx;
		background-color: #fff;
		position: fixed;
		top: calc(var(--status-bar-height) + 88rpx);
		left: 0rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #ccc;

		.tab-scroll {
			width: 100%;
			height: 100rpx;
			white-space: nowrap;

			.item {
				display: inline-block;
				vertical-align: middle;
				margin-right: 40rpx;
				text-align: center;
				box-sizing: border-box;
				height: 100rpx;
				position: relative;

				>view {
					text-align: center;

					&:nth-child(1) {
						height: 28rpx;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 28rpx;
						margin-top: 16rpx;
					}

					&:nth-child(2) {
						height: 34rpx;
						font-size: 20rpx;
						font-weight: 500;
						line-height: 34rpx;
					}
				}

				&:last-child {
					margin-right: 0rpx;
				}
			}

			.item-check {
				background-color: #ffffff;
				border-radius: 20rpx;
				color: #aa8050 !important;
				position: relative;

				&::after {
					content: '';
					width: 80%;
					height: 4rpx;
					border-radius: 2rpx;
					position: absolute;
					bottom: 2rpx;
					left: 10%;
					background-color: #aa8050;
				}
			}
		}
	}
</style>
